import React from 'react';
import { Checkbox, Col, Form, Row } from 'antd';
import { ObjectType } from '../../../../utils';
import { BaseSelect } from '@/components';

// 模态框里的form
class FormContent extends React.PureComponent<ObjectType> {
  handleSelectChange = (sortId: number) => {
    const { userLevelList, setSelectUserLevelHandle } = this.props;
    const userLevel: ObjectType = userLevelList.find((item: ObjectType) => item.sortId === sortId);
    setSelectUserLevelHandle(userLevel);
  };

  render() {
    const {
      form: { getFieldDecorator },
      userLevelList,
    } = this.props;
    return (
      <Row gutter={20}>
        <Col span={10}>
          <BaseSelect<>
            label="层级修改为："
            getFieldDecorator={getFieldDecorator}
            id="modifyLevel"
            optionsData={userLevelList}
            OptionKeyAttr="sortId"
            OptionValueAttr="sortId"
            OptionTextAttr="name"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 3 }}
            placeholder="请选择层级"
            style={{ width: '100%' }}
            onChange={this.handleSelectChange}
          />
        </Col>
        <Col span={10}>
          <Form.Item>
            {getFieldDecorator('toLockLevel')(<Checkbox disabled>锁定</Checkbox>)}
          </Form.Item>
        </Col>
      </Row>
    );
  }
}

// @ts-ignore
export const ModalFormContent = Form.create({ name: 'ModifyLevel' })(FormContent);
